<template>
  <div :class="['i-date-picker', { 'back-stage': backStage }]">
    <InputLabel v-if="label" :text="label" :required="required" :backStage="backStage" />
    <DatePicker
      v-bind="$attrs"
      v-on="$listeners"
      :class="[cls]"
      :style="style"
      :placeholder="placeholder"
      :clearable="clearable"
    ></DatePicker>
  </div>
</template>

<script>
import { inputMixin } from "./mixin/inputMixin";
// Iview DatePicker组件使用v-model时，绑定的是Date对象
// 建议使用@on-change将返回的值（字符串形式）绑定
// v-model用于回显，或者使用:value回显
// @group iview
export default {
  name: "IviewDatePicker",
  mixins: [inputMixin],
  // components: { InputLabel },
  props: {
    backStage: {
      type: Boolean,
    },
    placeholder: {
      type: String,
      default: "选择日期",
    },
    // 输入框标签
    label: {
      type: String,
    },
    // 是否必填，传入label时才有效
    required: {
      type: Boolean,
    },
  },
  data() {
    return {};
  },
  mounted() {},
};
</script>

<style lang="less" scoped>
@import "./config/input";
@import "./config/button";
.i-date-picker {
  .input-layout();
  /deep/.ivu-date-picker {
    .input-width();
    // 输入框
    .ivu-date-picker-rel {
      .ivu-input-prefix i,
      .ivu-input-suffix i {
        line-height: @input-height;
        color: @input-icon-color;
      }
      .ivu-input {
        .input-view();
        .input-text();
        width: 100%;
        height: @input-height;
        .input-placeholder;
      }
    }
    // 下拉框
    .ivu-select-dropdown {
      color: @text-color;
      .input-drawdown-view();
      .ivu-picker-panel-body-wrapper {
        // 顶部
        .ivu-date-picker-header {
          border-bottom: @input-drawdown-inner-border;
        }
        // 底部确认按钮
        .ivu-picker-confirm {
          .ivu-btn-text {
            color: @text-color;
            background: transparent;
            &:active,
            &:hover {
              background: transparent;
              color: @main-color;
            }
          }
          .datetime-picker-confirm;
        }
        .ivu-picker-panel-content {
          // 日期格子
          .ivu-date-picker-cells {
            // 星期一至星期日
            .ivu-date-picker-cells-header {
              span {
                color: @datepicker-weekday-color;
              }
            }
            .ivu-date-picker-cells-cell {
              color: @datepicker-cell-color;
              &.ivu-date-picker-cells-cell-prev-month em,
              &.ivu-date-picker-cells-cell-next-month em {
                color: @datepicker-cell-not-this-month;
              }
            }
            // 悬浮、范围
            .ivu-date-picker-cells-cell:hover em,
            .ivu-date-picker-cells-cell-range::before {
              background: @datepicker-cell-hover-bg;
            }
            // 选中状态
            .ivu-date-picker-cells-cell-selected em,
            .ivu-date-picker-cells-cell-selected:hover em {
              color: #282828 !important;
              background: @datepicker-cell-selected-bg;
              border-radius: 100%;
            }
            .ivu-date-picker-cells-focused em {
              // border: 0 0 0 1px @datepicker-cell-selected-bg inset;
              // background: @datepicker-cell-focus-bg;
              box-shadow: none;
            }
            .ivu-date-picker-cells-cell-disabled {
              background: @datepicker-cell-disabled-bg;
              &:hover em,
              &::before {
                background: @datepicker-cell-disabled-bg;
              }
            }
            .ivu-date-picker-cells-cell-today > em::after {
              .bg(@main-color);
            }
          }
        }
        // 时间点选择
        .ivu-picker-panel-body {
          min-width: auto;
          .ivu-picker-panel-content {
            &::after {
              .bg(transparent);
            }
          }
          .ivu-date-picker-header {
            .ivu-date-picker-header-label {
              &:hover {
                color: @text-color;
              }
            }
            .ivu-picker-panel-icon-btn {
              color: rgba(216, 216, 216, 0.3);
              &:hover {
                color: @text-color;
              }
            }
          }
          .ivu-time-picker-header {
            border-bottom: @input-drawdown-inner-border;
          }
          .ivu-time-picker-cells-list {
            .time-picker-cells-list;
          }
        }
      }
      .ivu-picker-panel-sidebar {
        color: @text-color;
        background: transparent;
        .ivu-picker-panel-shortcut:hover {
          background-color: @datepicker-cell-hover-bg;
        }
      }
    }
    &.ivu-date-picker-focused input {
      box-shadow: none;
    }
  }
}
</style>
